<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">
    
    <ui:define name="head">
      <style type="text/css">   
          .ui-datatable {
              margin-bottom:20px;
          }

          .ui-datatable-frozenlayout-left {
              width:20%;
          }

          .ui-datatable-frozenlayout-right {
              width:80%;
          }
      </style>
    </ui:define>
    
    <ui:define name="title">
        DataTable - <span class="subitem">Scrollable</span>
    </ui:define>

    <ui:define name="description">
        Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datatable" />

    <ui:define name="implementation">

        <h:form>
            <h3 style="margin-top:0">Vertical</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars1}" scrollable="true" scrollHeight="150">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>

            <h3>Horizontal</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars2}" scrollable="true" scrollWidth="400">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>

            <h3>Horizontal and Vertical</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars3}" scrollable="true" scrollWidth="50%" scrollHeight="150">
                <p:column headerText="Id" footerText="Id" width="200">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year" width="200">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand" width="200">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color" width="200">
                    <h:outputText value="#{car.color}" />
                </p:column>
                <p:column headerText="Id" footerText="Id" width="200">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year" width="200">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand" width="200">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color" width="200">
                    <h:outputText value="#{car.color}" />
                </p:column>
                <p:column headerText="Id" footerText="Id" width="200">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year" width="200">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand" width="200">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color" width="200">
                    <h:outputText value="#{car.color}" />
                </p:column>
                <p:column headerText="Id" footerText="Id" width="200">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year" width="200">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand" width="200">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color" width="200">
                    <h:outputText value="#{car.color}" />
                </p:column>
                <p:column headerText="Id" footerText="Id" width="200">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year" width="200">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand" width="200">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color" width="200">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>
            
            <h3>Frozen Rows</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars4}" scrollable="true" scrollHeight="150" frozenRows="2">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>
            
            <h3>Frozen Columns</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>

            <h3>On-Demand Data</h3>
            <p:dataTable var="car" value="#{dtScrollView.cars6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>
            
            <h3>Virtual Scrolling - 20000 Rows</h3>
            <p:dataTable var="car" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true" virtualScroll="true" scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
                <p:column headerText="Id" footerText="Id">
                    <h:outputText value="#{car.id}" />
                </p:column>
                <p:column headerText="Year" footerText="Year">
                    <h:outputText value="#{car.year}" />
                </p:column>
                <p:column headerText="Brand" footerText="Brand">
                    <h:outputText value="#{car.brand}" />
                </p:column>
                <p:column headerText="Color" footerText="Color">
                    <h:outputText value="#{car.color}" />
                </p:column>
            </p:dataTable>
        </h:form>
        
    </ui:define>

</ui:composition>